<template>
<div>
    <!-- 搜索组件一级路由   $router.back()返回上一个页面-->
    <van-nav-bar left-arrow title="搜索中心" @click-left="$router.back()"></van-nav-bar>
    <van-search
      show-action
      placeholder="请输入搜索关键词" shape="round" v-model.trim="keyword"
      @input="hGetSuggestion_with_jieliu">
      <div slot="action" @click="hSearch" >搜索</div>
    </van-search>

    <!-- 联想建议 -->
    <van-cell-group v-if="keyword">
      <van-cell v-for="(item,idx) in cSuggestion" :key="idx"
      @click="hSearchSuggestion(idx)"
       icon="search">
       <div v-html="item"></div>
      </van-cell>
      <!-- <van-cell title="" icon="search" /> -->
    </van-cell-group>
    <!-- /联想建议 -->

    <!-- 搜索历史记录,这里有两个点击事件。对于 关闭按钮来说，不希望它有冒泡到外层click的副作用
         可以：@click.stop -->
    <van-cell-group v-else>
      <van-cell title="历史记录">
      </van-cell>
      <van-cell  v-for="(item,idx) in history"
      @click="$router.push('/search/result?keyword=' + item)"
      :key="idx"
      :title="item" >
        <van-icon name="close" @click.stop="hDelHistory" />
      </van-cell>
      <!-- <van-cell title="单元格">
        <van-icon name="close" />
      </van-cell> -->
    </van-cell-group>
    <!-- /搜索历史记录 -->
  </div>
</template>

<script>
import { getSuggestion } from '@/api/search.js'
import { getItem, setItem } from '@/utils/storage.js'
const LOCALSTORAGE_SEARCH = 'searchHistory' // 消除魔术数（字符串）
export default {
  name: 'Search',
  data () {
    return {
      history: getItem(LOCALSTORAGE_SEARCH) || [], // 搜索历史记录,初始从本地取数据
      suggestion: [], // 当前搜索建议
      keyword: '', // 搜索关键字
      timer: null
    }
  },
  computed: {
    // 对suggestion处理高亮，根据keyword
    cSuggestion () {
      const reg = new RegExp(this.keyword, 'gi')
      // return this.suggestion.map(str => {
      //   const str1 = str.replace(reg, function (str) {
      //     return `<span style="color:red>${str}</span>"`
      //   })
      //   return str1
      // })
      return this.suggestion.map(str => str.replace(reg, str => `<span style="color:red">${str}</span>`))
    }
  },
  methods: {
    // 用户点击搜索按钮
    hSearch () {
      if (this.keyword === '') {
        return
      }
      // 把搜索添加到历史记录
      this.addHistory(this.keyword)
      // 跳转到结果页
      // this.$router.push('/search/result?keyword=' + this.keyword)
      // 方式二：对象格式
      this.$router.push({
        path: '/search/result',
        query: { keyword: this.keyword }
      })
    },
    // 用户点击某个搜索建议
    hSearchSuggestion (idx) {
      this.addHistory(this.suggestion[idx])
      this.$router.push('/search/result?keyword=' + this.suggestion[idx])
    },
    addHistory (str) {
      // 历史记录是一个数组，但其中的元素是不能重复的
      // 在数组中找到重复的，删除掉
      const idx = this.history.findIndex(it => it === str)
      if (idx !== -1) {
        // 说明在历史记录中有这一项
        // 删除掉
        this.history.replace(idx, 1)
      }
      // unshift 是在头部添加
      this.history.unshift(str)
      // 做本地存储
      setItem(LOCALSTORAGE_SEARCH, this.history)
    },
    hDelHistory (idx) {
      this.history.splice(idx, 1)
      setItem(LOCALSTORAGE_SEARCH, this.history)
    },
    // async hGetSuggestion () {
    //   if (this.keyword === '') {
    //     this.suggestion = []
    //     return
    //   }
    //   const result = await getSuggestion(this.keyword)
    //   this.suggestion = result.data.data.options
    // },
    // 优化--防抖处理
    // async hGetSuggestion_with_fangdou () {
    // 以防抖5s为例
    // 当这个函数被调用时，它不会立刻执行，而在5s之后执行。
    // 如果在5s内，它再次被调用了，则从当前被调用的时间开始，再向后延迟5s执行
    // if (this.timer) {
    // clearTimeout(this.timer)
    // }
    // this.timer = setTimeout(async () => {
    // console.log('12345678')
    // if (this.keyword === '') {
    // this.suggestion = []
    // return
    // }
    // const result = await getSuggestion(this.keyword)
    // this.suggestion = result.data.data.options
    // }, 0.5 * 1000)
    // }
    // 节流
    hGetSuggestion_with_jieliu () {
      if (!this.timer) {
        this.timer = setTimeout(async () => {
          this.timer = null
          if (this.keyword === '') {
            this.suggestion = []
            return
          }
          const result = await getSuggestion(this.keyword)
          this.suggestion = result.data.data.options
        }, 0.5 * 1000)
      }
    }
  }
}
</script>

<style lang="" scoped>

</style>
